<template>
  <a-layout class="layout-demo">
    <a-layout-sider collapsible breakpoint="xl">
      <a-menu
        :default-selected-keys="['0_1']"
        :style="{ width: '100%' }"
        @menu-item-click="onClickMenuItem"
      >
        <a-menu-item key="0_1">
          <IconHome></IconHome>
          Vxe Table
        </a-menu-item>
        <a-menu-item key="0_2">
          <IconCalendar></IconCalendar>
          Luckysheet
        </a-menu-item>
        <a-sub-menu key="0_3">
          <template #title> <IconCalendar></IconCalendar> VTable </template>
          <a-menu-item key="0_3_1">基础表格</a-menu-item>
          <a-menu-item key="0_3_2">树形表格</a-menu-item>
          <a-menu-item key="0_3_3">透视分析表格</a-menu-item>
          <a-menu-item key="0_3_4">透视树形表格</a-menu-item>
          <a-menu-item key="0_3_5">透视饼图表格</a-menu-item>
          <a-menu-item key="0_3_6">单元格表格</a-menu-item>
          <a-menu-item key="0_3_7">冻结行、列表格</a-menu-item>
          <a-menu-item key="0_3_8">排序表格</a-menu-item>
          <a-menu-item key="0_3_9">合并单元格表格</a-menu-item>
          <a-menu-item key="0_3_10">复选框表格</a-menu-item>
          <a-menu-item key="0_3_11">冻结行、列表格</a-menu-item>
          <a-menu-item key="0_3_12">排序表格</a-menu-item>
          <a-menu-item key="0_3_13">合并单元格表格</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout-content>
      <router-view></router-view>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import { ref, defineComponent, onMounted } from "vue";
import { useRouter } from "vue-router";
import * as VTable from "@visactor/vtable";
console.log("VTable", VTable);

const router = useRouter();

const vTableList = ref([]);

const onClickMenuItem = (key) => {
  // console.log("key", key);
  switch (key) {
    case "0_1":
      router.push("/vxe-table");
      break;
    case "0_2":
      router.push("/lucky-sheet");
      break;
    case "0_3_1":
      router.push("/v-table/basic");
      break;
    case "0_3_2":
      router.push("/v-table/tree");
      break;
    case "0_3_3":
      router.push("/v-table/perspective");
      break;
    case "0_3_4":
      router.push("/v-table/tree-perspective");
      break;
    case "0_3_5":
      router.push("/v-table/pie-perspective");
      break;
    case "0_3_6":
      router.push("/v-table/cell");
      break;
    case "0_3_7":
      router.push("/v-table/frozen");
      break;
    case "0_3_8":
      router.push("/v-table/sort");
      break;
    case "0_3_9":
      router.push("/v-table/merge-cell");
      break;
    case "0_3_10":
      router.push("/v-table/checkbox");
      break;
    default:
      break;
  }
};

onMounted(() => {
  router.push("/vxe-table");
});
</script>

<style scoped>
.layout-demo {
  width: 100vw;
  height: 100vh;
  background: var(--color-fill-2);
}
.layout-demo :deep(.arco-layout-sider) {
  text-align: left;
}
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
}
</style>
